<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>淘宝搜索案例</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
  </head>

  <body>
    <div class="container">
      <!-- Logo -->
      <img src="./images/taobao_logo.png" alt="" class="logo" />

      <div class="box">
        <!-- tab 栏 -->
        <div class="tabs">
          <div class="tab-active">宝贝</div>
          <div>店铺</div>
        </div>
        <!-- 搜索区域（搜索框和搜索按钮） -->
        <div class="search-box">
          <input
            type="text"
            class="ipt"
            placeholder="请输入要搜索的内容"
          /><button class="btnSearch">搜索</button>
        </div>

        <!-- 搜索建议列表 -->
        <div id="suggest-list">
          <!-- <div class="suggest-item">搜索建议1</div>
          <div class="suggest-item">搜索建议2</div>
          <div class="suggest-item">搜索建议3</div>
          <div class="suggest-item">搜索建议4</div> -->
        </div>
      </div>
    </div>

    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>
    <!-- 导入 axios -->
    <script src="./lib/axios.js"></script>
    <script>
      // onchange(离开焦点触发) oninput(输入触发)
      let timeId = null;
      $(".ipt").on("input", function () {
        // 防抖 -> 搜索场景 -> 停下来的时搜索的搜索才有意义
        clearTimeout(timeId); // 只会清除500毫秒之内的逻辑
        const kw = $(this).val().trim(); // 得到关键字
        if (!kw) return;
        timeId = setTimeout(() => {
          // 执行搜索
          getSuggestList(kw);
        }, 300);
      });
      function getSuggestList(kw) {
        // 进行查询
        jsonp("http://www.liulongbin.top:3006/api/suggest", {
          q: kw,
        }).then(({ result }) => {
          $("#suggest-list").html(
            result.map((item) => `<div class="suggest-item">${item}</div>`)
          );
        });
      }
      function jsonp(url, query) {
        return new Promise(function (resolve, reject) {
          // 要根据jsonp的实现原理 做跨域请求
          // script的src不受同源策略的限制
          // src不受跨域的限制 => url给src => 跨域会返回一段执行代码 => 对应的函数接收这个代码数据
          let script = document.createElement("script"); // 创建一个标签

          // 定义一个回调的方法 -> 将方法名传入到url -> 调用对应的方法
          // 创建了一个高频方法 - 用完方法之后 - 销毁
          // 方法不能是固定的
          const callbackName = `callback${Date.now()}`; // 随机会生成一个方法名
          // 如何定义一个全局方法
          window[callbackName] = function (data) {
            // data就是返回的数据
            // console.log(data);
            resolve(data); // 此时任务已经结束
            delete window[callbackName]; // 销毁方法
            document.body.removeChild(script); // 移除标签
          };
          url += "?callback=" + callbackName;
          // 遍历对象
          // 传进来的查询参数
          var arr = [];
          for (var key in query) {
            arr.push(`${key}=${query[key]}`);
          }
          script.src = url + "&" + arr.join("&"); // 赋值标签内容

          document.body.append(script); // 将标签加到页面上
        });
      }
    </script>
  </body>
</html>
